<template>
  <div>
    <a-page>
      <!-- Table header row -->
      <a-row type="flex" justify="space-between" align="middle" style="font-weight: bold; margin-bottom: 20px;">
        <a-col :span="4">积分编号</a-col>
        <a-col :span="2">积分照片</a-col>
        <a-col :span="2">积分数量</a-col>
        <a-col :span="2">积分名字</a-col>
        <a-col :span="4">积分介绍</a-col>
        <a-col :span="2">积分库存</a-col>
        <a-col :span="2">版本</a-col>
      </a-row>
      <!-- Table body rows (data) -->
      <div v-if="food.length!==0"  v-for="(item, index) in food" :key="index">
        <a-row type="flex" justify="space-between" align="middle" style="margin-bottom: 10px;">
          <a-col :span="4">{{ item.integralId }}</a-col>
          <a-col :span="2">
            <img :src="item.integralImg" alt="Food Image" style="width: 50px; height: 50px;" />
          </a-col>
          <a-col :span="2">{{ item.integralNum }}</a-col>
          <a-col :span="2">{{ item.integralName }}</a-col>
          <a-col :span="4" style="white-space: normal; word-break: break-word;">{{ item.integralIntroduce }}</a-col>
          <a-col :span="2">{{ item.integralInventory }}</a-col>
          <a-col :span="2" >{{ item.version }}</a-col>
        </a-row>

      </div>
      <div v-else>     <a-result
          status="success"
          title="还没有未上架的商品"
          sub-title="你好，亲爱的至减管理员"
      >
      </a-result></div>



    </a-page>

    <!-- Pagination -->
    <a-pagination
        v-model:current="current1"
        show-quick-jumper
        :total="total"
        @change="onChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import myaxios from "../../Axios/myaxios";

const current1 = ref<number>(1);
const food = ref<any[]>([]);
const total = ref<number>(0);

const fetchData = async (page: number) => {
  try {
    const response = await myaxios.get('/integral/queryIntegralAdmin', {
      params: {
        page: page,
        size: 10 // Number of items per page
      }
    });


    food.value = response.data.records.map((item: any) => ({
      integralId: item.integralId,
      integralName: item.integralName,
      integralIntroduce: item.integralIntroduce,
      integralImg:item.integralImg,
      integralNum: item.integralNum,
      integralInventory: item.integralInventory,
      version: item.version
    }));
    console.log(food.value,"你好")
    total.value = response.data.total; // Update total items count for pagination
  } catch (error) {
    console.error('Failed to fetch data:', error);
  }
};

onMounted(() => {
  fetchData(current1.value);

});

const onChange = (pageNumber: number) => {
  current1.value = pageNumber;
  fetchData(pageNumber);
};
</script>

<style>
demo-page-header :deep(tr:last-child td) {
  padding-bottom: 0;
}
</style>
